<template>
  <div class="inspectionbillDetail">
    <div class="headCrm mlcbg">
        <p class="billHead">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">订单详情</span>
        </p>
    </div>
    <div class = "contentCrm-inspect-detail">
      <div class="billDetailList">
          <ul>
              <li>
                <p>工单号</p>
                <span>{{inspectionbillDetail.id || '--'}}</span>
              </li>
              <li>
                <p>客户</p>
                <span>{{inspectionbillDetail.customerName || '--'}}</span>
              </li>
              <li>
                <p>客户手机</p>
                <span>{{inspectionbillDetail.contactPhone || '--'}}</span>
              </li>
              <li>
                <p>商品名称</p>
                <span>{{inspectionbillDetail.productName || '--'}}</span>
              </li>
              <li>
                <p>服务类型</p>
                <span>{{inspectionbillDetail.servicetypeName || '--'}}</span>
              </li>
              <li>
                <p>会员姓名</p>
                <span>{{inspectionbillDetail.memberName || '--'}}</span>
              </li>
              <li>
                <p>会员手机</p>
                <span>{{inspectionbillDetail.memberPhone || '--'}}</span>
              </li>
              <li><p class="afult">描述故障</p>
              </li>
              <div class="afultText">{{inspectionbillDetail.description || '--'}}</div>
          </ul>
      </div>
    </div>
    <div class = "footCrm" v-show="nextBtn">
        <el-button class="login-btn mlcbg" size="medium" :plain="true" @click="nextState"><p>下一步</p> </el-button>
    </div>
  </div>


</template>

<script>
export default {
  name: 'inspectionbillDetail',
  data() {
    return {
      inspectionbillDetail: {},
      nextBtn:localStorage.getItem('statusId') < 4 ? true : false
    };
  },
  mounted: function(){
    // this.loading = true;
    let _this = this;
    this.$fetch(this.$root.domainIp+'maintain/apporder/'+localStorage.getItem("detailId"))
    .then((response) => {
        // this.loading = false;
        if(response.code == 0){
            let json_data = JSON.parse(this.decrypt(response.data));
            this.inspectionbillDetail = json_data;
            localStorage.setItem("customerName",json_data.customerName);
            localStorage.setItem("tasktypeName",json_data.tasktypeName);
            localStorage.setItem("tasktypeId",json_data.tasktypeId);
        }else {
            _this.$message({
                message:(response.message || '请检查网络是否连接'),
                center: true
            });
        }
    }).catch(function (error) {
        // this.loading = false;
        console.log(error);
        _this.$message({
            message:('请检查网络是否连接'),
            center: true
        });
    });
  },
  methods: {
    handleClick: function(tab, event) {
      // console.log(tab, event);
    },
    nextState: function() {
      this.$router.push({
        path: '/billConfirmation',
      });
    },
    returnPage:function(){
      this.$router.push({
        path:'/inspection'
      })  
    }
  },
};
</script>

<style scoped>
  /* headCrm */
  .headCrm{
        width:100%;
  }
  .billHead{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    clear: none; 
  }
  .el-icon-arrow-left{
      position:absolute;
      left: 0.3rem;
      top:0.2rem;
      font-size: 0.6rem;
  }
  /* contentCrm-inspect-detail */
  .contentCrm-inspect-detail{
    color: #646464;
  }
  .contentCrm-inspect-detail p {
    font-size: 0.33rem;
  }
  .text {
    font-size: 0.3rem;
  }
  .billDetailList ul li p{
    width:30%;
    /* float: left; */
  }
  .billDetailList ul li span{
    float: right;
  }
  .billDetailList ul li {
    padding-top: 0.38rem;
  }
  .billDetailList ul {
    width: 90%;
    margin: 0% 5% 3% 5%;
    font-size: 0.33rem;
  }
  .login-btn.mlcbg{
    width: 100%;
  }
  .login-btn.mlcbg p{
    color:#fff;
  }
  .afult{
    margin-bottom: 0.2rem;
  }
  .afultText{
    line-height: 0.55rem;
  }
  /* footCrm */
  .footCrm{
    margin-left:5%;
    width: 90%;
    padding-top: 5%;
  }
  .el-button.el-button--success.is-round{
    border: 0;
    height: 1rem;
  }
</style>
